<template>
	<nav>
		<h1>课程页面</h1>
		<ul>
			<li v-for="c in courseList" :key="c.id">
				<!-- query传参: 方式一  字符串 /test?name=zhangsan&age=20-->
				<!-- <router-link :to="`/test?name=${c.name}`">{{c.name}}</router-link> -->
				<!-- query传参: 方式二 对象 -->
				<router-link :to="{
					               path:'/test',
							       query:{
									   name:c.name
								   }
							  }">{{c.name}}</router-link>
			</li>
		</ul>
		<router-view></router-view>
	</nav>
</template>

<script>
	export default {
		name: 'Course',
		data() {
			return {
				courseList: [{
						id: 1,
						name: 'HTML'
					},
					{
						id: 2,
						name: 'CSS'
					},
					{
						id: 3,
						name: 'JQUERY'
					}
				]
			}
		}
	}
</script>

<style scoped>
	li {
		list-style: none;
	}
</style>
